<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./jquery-1.12.4.min.js"></script>
    <title>Document</title>
</head>
<div class="nameblock">
    <i>昵称</i>
    <input type="text" class="name">
</div>
<textarea style="width: 300px;height: 300px;" class="contant"></textarea>

<div style="width: 300px;height: 50px;background-color: aquamarine;" class="submitBlock">
    <div style="float: right;">
        <div>
            <input type="checkbox" class="isAnonymous">
            <i>匿名</i>
        </div>
        <button class="upload">提交</button>
    </div>
</div>

<script>
    $(".upload").click(() => {

        let name = $(".name").val();
        let contant = $(".contant").val();
        let isCheck = $(".isAnonymous").prop('checked');

        if (name == "" || contant == "" || name == null || contant == null) {
            alert("昵称或者内容不可为空");
            return;
        }
        var news = {};
        if (isCheck) {
            news.name = "路人甲";
        } else {
            news.name = name;
        }
        news.contant = contant;

        let date = new Date();

        let hours = date.getHours >= 12 ? "上午 " : "下午 ";
        news.currentTime = hours + date.toLocaleTimeString();

        $("<div></div>").attr("class", "log").css("with", "500px").insertAfter($('.submitBlock'));
        $("<span></span>").val("value").text(news.name + ' ').appendTo($('.log'))
        $("<span></span>").val("value").text(news.currentTime).appendTo($('.log'))
        $("</br>").appendTo($('.log'))
        $("<span></span>").val("value").text(news.contant).appendTo($('.log'))
        $("</br>").appendTo($('.log'))
        $(".log").removeAttr("class");

    })
</script>
</body>

</html>